<template>
  <div class="searchedView">
    <header>
      <div class="toSearching" @click="toSearching">
        <svg
          t="1677415686915"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6270"
          width="16"
          height="16"
        >
          <path
            d="M769.322667 708.992l182.741333 182.698667-60.373333 60.373333-182.698667-182.741333A382.293333 382.293333 0 0 1 469.333333 853.333333c-211.968 0-384-172.032-384-384s172.032-384 384-384 384 172.032 384 384a382.293333 382.293333 0 0 1-84.010666 239.658667z m-85.589334-31.658667A297.685333 297.685333 0 0 0 768 469.333333c0-165.034667-133.674667-298.666667-298.666667-298.666666-165.034667 0-298.666667 133.632-298.666666 298.666666 0 164.992 133.632 298.666667 298.666666 298.666667a297.685333 297.685333 0 0 0 208-84.266667l6.4-6.4z"
            fill="#999999"
            p-id="6271"
          ></path>
        </svg>
        <input
          v-model="searchText"
          type="text"
          placeholder="请输入作品名，创作人"
        />
        <svg
          v-show="searchText"
          @click="clearInput"
          t="1677425022737"
          class="icon1"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="7574"
          width="18"
          height="18"
        >
          <path
            d="M510.1 475.9L378.4 339.5c-10.4-10.7-27.4-10.9-38.1-0.5-5.2 4.9-8.2 11.7-8.3 18.9-0.2 7.2 2.6 14.1 7.5 19.2l131.7 136.4-136.4 131.7c-10.7 10.4-10.9 27.4-0.5 38.1 4.9 5.2 11.7 8.2 18.9 8.3 7.2 0.2 14.1-2.6 19.2-7.5l136.4-131.7 131.7 136.4c10.4 10.7 27.4 10.9 38.1 0.5 5.2-4.9 8.2-11.7 8.3-18.9 0.2-7.2-2.6-14.1-7.5-19.2L547.7 514.8l136.4-131.7c10.7-10.4 10.9-27.4 0.5-38.1-4.9-5.2-11.7-8.2-18.9-8.3-7.2-0.2-14.1 2.6-19.2 7.5L510.1 475.9zM220.4 793.2c-155.7-161.3-151.2-418.2 10-574 161.3-155.7 418.2-151.2 574 10 155.7 161.3 151.3 418.2-10 574-161.3 155.7-418.2 151.3-574-10z m0 0"
            fill="#999999"
            p-id="7575"
          ></path>
        </svg>
      </div>
      <div class="cancel" @click="back">取消</div>
    </header>
    <van-tabs
      v-model="active"
      title-inactive-color="#999"
      line-width="30"
      animated
    >
      <van-tab title="作品">
        <SearchedArticle />
      </van-tab>
      <van-tab title="创作人">
        <SearchedCreator />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import SearchedArticle from "@/components/SearchedArticle.vue";
import SearchedCreator from "@/components/SearchedCreator.vue";

export default {
  name: "SearchedView",
  components: {
    SearchedArticle,
    SearchedCreator,
  },
  data() {
    return {
      searchText: "",
      active: 0,
    };
  },
  created() {
    this.searchText = this.$route.query.kw;
  },
  methods: {
    clearInput() {
      this.searchText = "";
    },
    back() {
      window.history.go(-1);
    },
    toSearching() {
      this.$router.replace({
        path: "/searching",
        query: { kw: this.searchText },
      });
    },
  },
  beforeRouteEnter(to, from, next) {
    // console.log(to);
    to;
    next((vm) => {
      if (from.path.indexOf("user") != -1) {
        vm.active = 1;
      }
    });
    next();
  },
};
</script>

<style lang="scss" scoped>
.searchedView {
  padding-top: 70px;
  // height: 1000px;

  header {
    height: 50px;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid #f2f2f2;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .toSearching {
      margin-left: 15px;
      background-color: #f0f0f0;
      border-radius: 5px;
      height: 36px;
      display: flex;
      align-items: center;
      width: 295px;

      .icon {
        margin-left: 14px;
        margin-right: 7px;
        width: 22px;
        height: 22px;
        flex-shrink: 0;
      }

      .icon1 {
        width: 22px;
        height: 22px;
        margin-left: 8px;
        flex-shrink: 0;
      }

      input {
        background: none;
        outline: none;
        // border: 1px solid #ccc;
        border: none;
        padding: 0;
        font-size: 14px;
        color: #999;
        width: 215px;
        flex-shrink: 0;
      }

      input:focus {
        border: none;
      }
    }

    .cancel {
      font-size: 16px;
      margin-right: 15px;
    }
  }

  :deep(.van-tabs__wrap) {
    padding-top: 10px;
    position: fixed;
    top: 50px;
    left: 0;
    border-bottom: 1px solid #f2f2f2;
    width: 100%;
    background-color: white;
    z-index: 10;
  }

  :deep(.van-tab) {
    font-weight: bold !important;
    font-size: 15px;
  }
}
</style>
